<template>
  <div class="district">
    <div class="add_button">
      <a-button type="primary" @click="addAreaList">添加区域</a-button>
    </div>
    <div class="zone_list">
      <a-table :columns="columns" :data-source="list" :pagination="false" :loading="loading">
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'number'">
            {{ (pages.page - 1) * pages.pageSize + index + 1 }}</template
          >
          <a-space v-if="column.dataIndex === 'operate'">
            <a-button type="link" @click="editRow(record)">编辑</a-button>
            <a-popconfirm
              title="是否确认删除当前区域"
              ok-text="确定"
              cancel-text="取消"
              @confirm="confirm(record.id)"
              @cancel="cancel"
            >
              <a-button type="link">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
      <div class="pagination">
        <a-config-provider :locale="zh_CN"
          ><a-pagination
            v-model:current="pages.page"
            v-model:page-size="pages.pageSize"
            size="small"
            :total="total"
            :show-total="(total) => `共 ${total} 条`"
            @change="onChange"
            show-size-changer
            show-quick-jumper
            :pageSizeOptions="['10', '20', '30', '40']"
        /></a-config-provider>
      </div>
    </div>
    <add-area
      v-model:showVisible="showVisible"
      @addFormList="getList(pages)"
      ref="addButton"
    ></add-area>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { getArea, delArea } from '../../api/car/car-area.js'
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import addArea from './components/addArea.vue'
import { message } from 'ant-design-vue'
const columns = ref([
  {
    title: '序号',
    dataIndex: 'number',
    key: 'number'
  },
  {
    title: '区域名称',
    dataIndex: 'areaName',
    key: 'areaName'
  },
  {
    title: '车位数(个)',
    dataIndex: 'spaceNumber',
    key: 'spaceNumber'
  },
  {
    title: '面积(㎡)',
    dataIndex: 'areaProportion',
    key: 'areaProportion'
  },
  {
    title: '计费规则',
    dataIndex: 'ruleName',
    key: 'ruleName'
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark'
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate'
  }
])
let list = ref([])
//获取分页
const pages = ref({
  page: 1,
  pageSize: 10
})
const showVisible = ref(false)
const loading = ref(false)
const total = ref(null)
//获取列表数据
const getList = async (pages) => {
  loading.value = true
  const res = await getArea(pages)
  list.value = res.data.rows
  total.value = res.data.total
  console.log(list)
  loading.value = false
}
const onChange = (page, pageSize) => {
  pages.value.page = page
  pages.value.pageSize = pageSize
  getList(pages.value)
}
//添加区域
const addButton = ref(null)
const addAreaList = () => {
  showVisible.value = true
  addButton.value.getRuleApi()
}
//确认删除
const confirm = async (id) => {
  await delArea(id)
  message.success('删除成功')
  getList(pages.value)
}
//编辑
const editRow = (record) => {
  showVisible.value = true
  addButton.value.showRuleApi(record)
}
onMounted(() => {
  getList(pages.value)
})
</script>
<style scoped lang="scss">
.district {
  margin: 20px;
  padding: 20px 20px 0 20px;
  background-color: #fff;
  height: 100vh;
  .add_button {
    margin-bottom: 20px;
  }
  .pagination {
    display: flex;
    justify-content: end;
    margin-top: 20px;
  }
}
:deep(.ant-table-cell) {
  color: #000000d9;
  font-size: 14px;
}
:deep(.ant-table-cell::before) {
  width: 0px !important;
}
:deep(.ant-btn-link) {
  padding-left: 0;
}
</style>
